<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <link rel="stylesheet" href="static/elementui.css">
    <script src="static/vue@2.6.14.js"></script>
    <script src="static/elementui.js"></script>
    <script src="static/axios.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f2f2f2;
        }

        .card-container {
            width: 400px;
            margin: 20px;
        }

        .card-header {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card-container">
        <el-card>
            <div class="card-header">修改密码</div>
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input type="password" v-model="passwordForm.confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确认修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                passwordForm: {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                    username: '' // 新增字段，用于存储从 localStorage 获取的 username
                },
                passwordRules: {
                    oldPassword: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        {
                            validator: (rule, value, callback) => {
                                if (value !== this.passwordForm.newPassword) {
                                    callback(new Error('两次输入的密码不一致'));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                        }
                    ]
                },
                submitLoading: false
            };
        },
        created() {
            // 页面加载时从 localStorage 中获取 username
            this.passwordForm.username = this.getUserFromLocalStorage().username;
        },
        methods: {
            handleSubmit() {
                this.$refs.passwordForm.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        axios.post('/user?operation=updatePassword', this.passwordForm)
                            .then(response => {
                                if (response.data.code === 200) {
                                    this.$message.success(response.data.msg);
                                } else {
                                    this.$message.error(response.data.msg);
                                }
                            })
                            .catch(error => {
                                console.error('修改密码失败:', error);
                                this.$message.error('修改密码失败');
                            })
                            .finally(() => {
                                this.submitLoading = false;
                            });
                    } else {
                        console.log('表单验证未通过');
                        return false;
                    }
                });
            },
            getUserFromLocalStorage() {
                const userData = localStorage.getItem('user');
                return userData ? JSON.parse(userData) : {};
            }
        }
    });
</script>

</body>
</html>
